<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">

            <el-form-item label="菜单布局方向">
                <el-radio-group v-model="propJson.menuModelDirection">
                    <el-radio label="horizontal">横向</el-radio>
                    <el-radio label="vertical">纵向</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="子菜单展开方式" v-if="propJson.menuModelDirection === 'horizontal'">
                <el-radio-group v-model="propJson.menuTrigger">
                    <el-radio label="click">点击展开</el-radio>
                    <el-radio label="hover">悬浮展开</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="纵向高度" v-if="propJson.menuModelDirection === 'vertical'">
                <el-input v-model="propJson.menuHeight" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="菜单背景色">
                <el-color-picker v-model="propJson.backgroundColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="菜单字体颜色">
                <el-color-picker v-model="propJson.textColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="菜单激活字体颜色">
                <el-color-picker v-model="propJson.activeTextColor" color-format="hex" />
            </el-form-item>

            <el-form-item label="是否只展示一个子菜单">
                <el-radio-group v-model="propJson.uniqueOpened">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="第一层级菜单字体大小">
                <el-input v-model="propJson.firstMenuFontSize" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="第二层级菜单字体大小">
                <el-input v-model="propJson.secondMenuFontSize" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="第三层级菜单字体大小">
                <el-input v-model="propJson.thirdMenuFontSize" style="width: 100%" placeholder="纵向高度" />
            </el-form-item>

            <el-form-item label="是否记录面包屑变量">
                <el-radio-group v-model="propJson.isRecordBreadCrumb">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="关联面包屑变量" v-if="propJson.isRecordBreadCrumb">
                <el-select v-model="propJson.breadCrumbVariable" placeholder="关联面包屑变量" style="width: 100%" >
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <span>菜单编辑:</span> <br/><br/>
            <el-button type="primary" plain size="small" @click.stop="addFirstMenu(propJson.menuJson)">添加菜单</el-button>
            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="item1.index" v-for="(item1, index1) in propJson.menuJson">
                        <template #title>
                            <div class="collapseTitle">
                                <span>菜单名称：{{item1.title}}</span>
                                <el-button type="primary" plain size="small" style="margin-left: 20px" @click.stop="addMenu(item1, index1)">添加子菜单</el-button>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteMenu(propJson.menuJson, index1)">删除菜单</el-button>
                            </div>
                        </template>
                        <div>
                            <el-form-item label="菜单名称">
                                <el-input v-model="item1.title" style="width: 100%" placeholder="菜单名称" />
                            </el-form-item>
                            <el-form-item label="菜单图标">
                                <el-select v-model="item1.iconType" clearable placeholder="选择菜单图标" filterable style="width: 100%">
                                    <el-option v-for="iconItem in icons.dataList" :key="iconItem.id" :value="iconItem.componentName" :label="iconItem.componentCnName"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="关联菜单">
                                <el-cascader v-model="item1.id" style="width: 100%" :props="CascaderProps" :options="componentInfoList" @change="menuSelectChange($event, item1)" />
                            </el-form-item>
                        </div>
                        <div style="margin-left: 5%">
                            <el-collapse>
                                <el-collapse-item :name="item2.index" v-for="(item2, index2) in item1.children">
                                    <template #title>
                                        <div class="collapseTitle">
                                            <span>菜单名称：{{item2.title}}</span>
                                            <el-button type="primary" plain size="small" style="margin-left: 20px" @click.stop="addMenu(item2, index2)">添加子菜单</el-button>
                                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteMenu(item1.children, index2)">删除菜单</el-button>
                                        </div>
                                    </template>
                                    <div>
                                        <el-form-item label="子菜单名称">
                                            <el-input v-model="item2.title" style="width: 100%" placeholder="子菜单名称" />
                                        </el-form-item>
                                        <el-form-item label="菜单图标">
                                            <el-select v-model="item2.iconType" clearable placeholder="选择菜单图标" filterable style="width: 100%">
                                                <el-option v-for="iconItem in icons.dataList" :key="iconItem.id" :value="iconItem.componentName" :label="iconItem.componentCnName"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="关联菜单">
                                            <el-cascader v-model="item2.id" style="width: 100%" :props="CascaderProps" :options="componentInfoList" @change="menuSelectChange($event, item2)" />
                                        </el-form-item>
                                    </div>
                                    <div style="margin-left: 5%">
                                        <el-collapse>
                                            <el-collapse-item :name="item3.index" v-for="(item3, index3) in item2.children">
                                                <template #title>
                                                    <div class="collapseTitle">
                                                        <span>菜单名称：{{item3.title}}</span>
                                                        <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteMenu(item2.children, index3)">删除菜单</el-button>
                                                    </div>
                                                </template>
                                                <div>
                                                    <el-form-item label="子菜单名称">
                                                        <el-input v-model="item3.title" style="width: 100%" placeholder="子菜单名称" />
                                                    </el-form-item>
                                                    <el-form-item label="菜单图标">
                                                        <el-select v-model="item3.iconType" clearable placeholder="选择菜单图标" filterable style="width: 100%">
                                                            <el-option v-for="iconItem in icons.dataList" :key="iconItem.id" :value="iconItem.componentName" :label="iconItem.componentCnName"></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="关联菜单">
                                                        <el-cascader v-model="item3.id" style="width: 100%" :props="CascaderProps" :options="componentInfoList" @change="menuSelectChange($event, item3)" />
                                                    </el-form-item>
                                                </div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>
    </div>
</template>

<script name="MenuDrawer" setup lang="ts">

import {menuInfoQuery} from "@/request/menu";
import {computed, defineProps, ref} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import {useMenuStore} from "@/stores/menu/menu.ts";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

let componentInfoList = ref([]);

let CascaderProps = ref({
    value: "id",
    label: "cnName",
    children: "children"
})

menuInfoQuery({}).then(res => {
    componentInfoList.value = res.data;
})

let icons = computed(() => {
    return useMenuStore().menuIcons;
})

function addFirstMenu(item) {
    let itemInfo = {
        title: "菜单",
        routeTo: "",
        children: []
    }
    item.push(itemInfo)
}

function addMenu(item, index) {
    let itemInfo = {
        title: "菜单",
        routeTo: "",
        children: []
    }
    item.children.push(itemInfo)
}

function deleteMenu(item, index) {
    // 删除数组中的数据
    item.splice(index, 1);
}

function menuSelectChange(event, item) {
    if (!event) {
        return
    }
    let tempList:any = componentInfoList.value
    for (let i = 0; i < event.length; i++) {
        if (i === event.length - 1) {
            let findRes = tempList.find((info:any) => info['id'] === event[i])
            // 最后一个直接找到后直接替换
            item.title = findRes.cnName;
            item.iconType = findRes.iconType;
            item.routeTo = findRes.routeTo;
        } else {
            // 查找id相等
            let findRes = tempList.find((info:any) => info['id'] === event[i])
            tempList = findRes[CascaderProps.value.children];
        }
    }
}
</script>

<style scoped lang="less">
.collapseTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>